'use client';

import React, { useState, useEffect } from 'react';
import { 
  getRecruitmentAnnouncementsPaginated 
} from '@/lib/recruitment';
import { getArticlesByType, getArticleById, Article, ArticleType } from '@/lib/articles';
import { useRouter } from 'next/navigation';
import Image from 'next/image';
import { 
  MdBusinessCenter, // 管理岗位图标
  MdSchool,        // 教师岗位图标
  MdPeople,        // 其他岗位图标
  MdPersonAdd,     // 报名
  MdFactCheck,     // 资格审查
  MdQuiz,          // 考试考核
  MdLocalHospital, // 体检
  MdCheckCircle,   // 录用
  MdLogin,         // 登录按钮图标
  MdSearch,        // 搜索图标
  MdFileDownload,  // 下载图标
  MdMenu
} from 'react-icons/md';
import Cookies from 'js-cookie';
import { mobileNavStyles } from '@/styles/mobileNav';
import { Pagination } from 'antd';
import dayjs from 'dayjs';
import { Breadcrumbs, Link as MuiLink, Typography, Divider, List, ListItem, ListItemText, Paper, Box, IconButton, Button } from '@mui/material';
import { NavigateNext as NavigateNextIcon, ArrowBack } from '@mui/icons-material';
import { DeleteOutlined } from '@mui/icons-material';
import { message } from 'antd';
import { HomeOutlined } from '@mui/icons-material';
import { MENU_MAPPING } from '@/constants/menuMapping';
import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
import { getPlanAttachmentInfo, downloadPlanAttachment } from '@/lib/file';
import { Modal, Form, Input, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { uploadResume } from '@/lib/apply';

// 添加假数据常量
const MOCK_ANNOUNCEMENTS = [
  {
    planId: 1,
    planName: '关于开展2025年上半年广西高校教师资格理论考试报名工作的通知',
    publishDate: '2025-01-24',
  },
  {
    planId: 2,
    planName: '学校顺利开展全体教师第一轮"课堂教学质量监课提升"活动',
    publishDate: '2025-01-14',
  },
  {
    planId: 3,
    planName: '学校顺利开展青年教师教学能力第一阶段考核验收活动',
    publishDate: '2025-01-14',
  },
  {
    planId: 4,
    planName: '关于遴选2025年广西高校青年教师教学业务能力提升培训班培养对象的通知',
    publishDate: '2025-01-07',
  },
  {
    planId: 5,
    planName: '2024年下半年教师资格考试面试公告',
    publishDate: '2024-12-20',
  },
  {
    planId: 6,
    planName: '关于开展2024年教师教学创新大赛的通知',
    publishDate: '2024-12-15',
  },
  {
    planId: 7,
    planName: '2024年教师专业发展培训计划',
    publishDate: '2024-12-10',
  },
  {
    planId: 8,
    planName: '关于组织参加高校教师教学能力提升研修班的通知',
    publishDate: '2024-12-05',
  },
  {
    planId: 9,
    planName: '2024年教师岗位招聘计划',
    publishDate: '2024-12-01',
  },
  {
    planId: 10,
    planName: '关于开展教师教学质量评估工作的通知',
    publishDate: '2024-11-28',
  }
];

// 添加自定义 Hook
const useScrollAnimation = () => {
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('animate-in');
          }
        });
      },
      {
        threshold: 0.1 // 当元素10%进入视口时触发
      }
    );

    // 获取所有需要动画的元素
    const sections = document.querySelectorAll('.animate-section');
    sections.forEach(section => observer.observe(section));

    return () => observer.disconnect();
  }, []);
};

// 添加类型定义
interface Position {
  positionName: string;
  positionNumber: string;
  positionProperties: string | null;
  jobDescription: string;
  jobRequired: string;
  person: number;
  professionalSkillsRight: number;
  communicationSkillsRight: number;
  teamworkAbilityRight: number;
}

interface Department {
  numbering: string;
  name: string;
  positions: Position[];
}

interface RecruitmentPlan {
  planId: number;
  planName: string;
  planCode: string;
  planType: number;
  depts?: Department[];
  recruiterId?: string;
  recruiterName?: string;
  recruiterPhone?: string;
  recruitmentConditions?: string | null;
  benefitsDescription?: string | null;
  startDate: string;
  endDate: string;
  publishDate: string;
  interviewProcess?: string | null;
  approveStatus: number;
  approverId: string;
  notes: string | null;
  attachments: string;
  content?: string | null;
  createdAt: string;
  updatedAt: string;
  createdBy?: string;
  updatedBy?: string;
}

// 修改附件状态的类型定义
interface AttachmentInfo {
  fileName: string;
  contentType: string;
  fileSize: number;
}

interface RecruitmentAnnouncement {
  id: number;
  title: string;
  content: string;
  publishDate: string;
  depts: {
    id: number;
    name: string;
    positionProperties: {
      professionalSkillsRight: number;
      communicationSkillsRight: number;
      teamworkAbilityRight: number;
    };
  }[];
}

const AnnouncementPage = () => {
  const router = useRouter();
  const [articles, setArticles] = useState<Article[]>([]);
  const [loading, setLoading] = useState(true);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [isNavHovered, setIsNavHovered] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 10; // 每页显示10条
  const [localAnnouncements, setLocalAnnouncements] = useState(MOCK_ANNOUNCEMENTS);
  const [pageTitle, setPageTitle] = useState('');
  const [menuId, setMenuId] = useState<string | null>(null);
  const [currentArticle, setCurrentArticle] = useState<Article | null>(null);
  const [showDetail, setShowDetail] = useState(false);
  const [recruitmentPlans, setRecruitmentPlans] = useState<RecruitmentPlan[]>([]);
  const [totalPlans, setTotalPlans] = useState(0);
  // 添加当前查看的招聘计划状态
  const [currentPlan, setCurrentPlan] = useState<RecruitmentPlan | null>(null);
  // 修改状态定义
  const [attachments, setAttachments] = useState<AttachmentInfo[]>([]);
  // 添加上一篇下一篇的状态
  const [prevArticle, setPrevArticle] = useState<Article | null>(null);
  const [nextArticle, setNextArticle] = useState<Article | null>(null);
  // 修改状态定义，添加上一篇下一篇的招聘计划状态
  const [prevPlan, setPrevPlan] = useState<RecruitmentPlan | null>(null);
  const [nextPlan, setNextPlan] = useState<RecruitmentPlan | null>(null);
  // 添加状态
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedPosition, setSelectedPosition] = useState<{
    deptId: string;
    positionNumber: string;
    positionName: string;
  }>({ deptId: '', positionNumber: '', positionName: '' });
  const [form] = Form.useForm();

  // 修改初始化 useEffect
  useEffect(() => {
    const searchParams = new URLSearchParams(window.location.search);
    const id = searchParams.get('menuId');
    console.log('组件初始化:', {
      menuId: id,
      currentPage,
      fullUrl: window.location.href
    });
    
    if (id) {
      setMenuId(id);
      const title = id === '5' ? '人才招聘' : MENU_MAPPING[id]?.title;
      setPageTitle(title);
      loadArticles(Number(id));
    }
  }, []); // 组件挂载时执行一次

  // 移除原来的 loadArticles 调用
  useEffect(() => {
    // loadArticles(); // 移除这行
    checkLoginStatus();
    
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 100);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // URL 变化时的处理
  useEffect(() => {
    const searchParams = new URLSearchParams(window.location.search);
    const id = searchParams.get('menuId');
    console.log('URL 参数变化:', {
      menuId: id,
      currentPage,
      fullUrl: window.location.href
    });
    
    if (id && id !== menuId) { // 只在 menuId 真正变化时才重新加载
      setMenuId(id);
      const title = id === '5' ? '人才招聘' : MENU_MAPPING[id]?.title;
      setPageTitle(title);
      loadArticles(Number(id));
    }
  }, [window.location.search, menuId]); // 添加 menuId 作为依赖

  const checkLoginStatus = () => {
    const token = Cookies.get('token');
    setIsLoggedIn(!!token);
  };

  // 修改 loadArticles 函数中的 URL 检查
  const loadArticles = async (type?: number) => {
    try {
      setLoading(true);
      if (!type) return;
      
      if (type === 5) { // 人才招聘菜单
        const params = {
          page: currentPage,
          pageSize: pageSize,
        };
        
        console.log('发起请求:', {
          type: '招聘计划列表',
          menuId: type,
          params: params,
          currentPage,
          pageSize
        });

        const response = await getRecruitmentAnnouncementsPaginated(params);
        console.log('API响应:', response);

        if (response && response.records) {
          const convertedRecords = response.records.map((record: any) => ({
            planId: record.planId,
            planName: record.planName,
            planCode: record.planCode,
            planType: record.planType,
            depts: record.depts?.map((dept: any) => ({
              numbering: dept.numbering,
              name: dept.name || dept.deptName || '',
              positions: dept.positions?.map((pos: any) => ({
                positionName: pos.positionName,
                positionNumber: pos.positionNumber,
                positionProperties: pos.positionProperties || '',
                jobDescription: pos.jobDescription,
                jobRequired: pos.jobRequired,
                person: pos.person,
                professionalSkillsRight: pos.professionalSkillsRight || 0,
                communicationSkillsRight: pos.communicationSkillsRight || 0,
                teamworkAbilityRight: pos.teamworkAbilityRight || 0
              })) || []
            })) || [],
            recruiterId: record.recruiterId,
            recruiterName: record.recruiterName,
            recruiterPhone: record.recruiterPhone,
            recruitmentConditions: record.recruitmentConditions,
            benefitsDescription: record.benefitsDescription,
            startDate: record.startDate,
            endDate: record.endDate,
            publishDate: record.publishDate,
            interviewProcess: record.interviewProcess,
            approveStatus: record.approveStatus,
            approverId: record.approverId,
            notes: record.notes,
            attachments: record.attachments,
            content: record.content,
            createdAt: record.createdAt,
            updatedAt: record.updatedAt,
            createdBy: record.createdBy,
            updatedBy: record.updatedBy
          })) as RecruitmentPlan[];

          console.log('设置数据:', {
            records: convertedRecords,
            total: response.total
          });
          setRecruitmentPlans(convertedRecords);
          setTotalPlans(response.total);
        } else {
          console.error('响应数据格式不正确:', response);
          throw new Error('获取招聘计划失败');
        }
      } else {
        const response = await getArticlesByType(type);
        if (response.data?.code === 1) {
          setArticles(response.data.data);
        } else {
          throw new Error(response.data?.msg || '获取文章列表失败');
        }
      }
    } catch (error: any) {
      console.error('请求失败:', {
        error: error.message,
        stack: error.stack,
        response: error.response?.data
      });
      message.error(error.message);
    } finally {
      setLoading(false);
    }
  };

  // 添加删除功能
  const handleDelete = (planId: number) => {
    setLocalAnnouncements(prev => prev.filter(item => item.planId !== planId));
    message.success('删除成功');
  };

  // 添加卡片翻转处理函数
  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const card = e.currentTarget;
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left; // 鼠标在卡片上的X坐标
    const y = e.clientY - rect.top;  // 鼠标在卡片上的Y坐标
    
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    
    // 计算旋转角度（最大15度）
    const rotateX = -((y - centerY) / centerY) * 15;
    const rotateY = ((x - centerX) / centerX) * 15;
    
    card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
  };

  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
    const card = e.currentTarget;
    card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)';
  };

  // 添加动画控制
  useEffect(() => {
    const animateTimeline = () => {
      const items = document.querySelectorAll('.timeline-point');
      let currentIndex = 0;

      const animate = () => {
        // 重置所有点的状态
        items.forEach(item => {
          item.classList.remove('active');
        });

        // 激活当前点
        if (currentIndex < items.length) {
          items[currentIndex].classList.add('active');
          currentIndex++;
        } else {
          currentIndex = 0; // 重新开始
        }
      };

      // 每2秒切换一次
      const interval = setInterval(animate, 2000);
      animate(); // 立即开始第一次动画

      return () => clearInterval(interval);
    };

    animateTimeline();
  }, []);

  // 处理按钮点击
  const handleButtonClick = () => {
    if (isLoggedIn) {
      router.push('/dashboard');
    } else {
      router.push('/login');
    }
  };

  // 使用自定义 Hook
  useScrollAnimation();

  // 修改分页处理函数
  const handlePageChange = (page: number) => {
    console.log('页码变化:', {
      from: currentPage,
      to: page,
      menuId
    });
    
    setCurrentPage(page);
    // 立即加载新页面的数据
    if (menuId) {
      loadArticles(Number(menuId));
    }
  };

  // 修改导航链接生成函数
  const generateMenuLink = (menuId: number) => {
    const menuIdString = menuId.toString();
    if (MENU_MAPPING[menuIdString]) {
      return `${MENU_MAPPING[menuIdString].path}?menuId=${menuIdString}`;
    }
    return '#'; // 或者返回一个默认路径
  };

  // 添加获取文章详情的函数
  const loadArticleDetail = async (id: number) => {
    try {
      setLoading(true);
      const response = await getArticleById(id);
      if (response.data?.code === 1) {
        setCurrentArticle(response.data.data);
        setShowDetail(true);
        
        // 获取上一篇和下一篇
        const currentIndex = articles.findIndex(article => article.id === id);
        setPrevArticle(currentIndex > 0 ? articles[currentIndex - 1] : null);
        setNextArticle(currentIndex < articles.length - 1 ? articles[currentIndex + 1] : null);
        
        window.history.pushState(
          {}, 
          '', 
          `${window.location.pathname}?menuId=${menuId}&articleId=${id}`
        );
      } else {
        throw new Error(response.data?.msg || '获取文章详情失败');
      }
    } catch (error: any) {
      console.error('获取文章详情失败:', error);
      message.error(error.message);
    } finally {
      setLoading(false);
    }
  };

  // 修改获取附件信息的函数
  const loadAttachments = async (planId: number) => {
    try {
      const response = await getPlanAttachmentInfo(planId.toString());
      console.log("附件信息响应:", JSON.stringify(response.data, null, 2));
      
      if (response.data?.fileName) {
        const attachmentData = [{
          fileName: response.data.fileName,
          contentType: response.data.contentType,
          fileSize: response.data.fileSize
        }];
        
        console.log("处理后的附件数据:", JSON.stringify(attachmentData, null, 2));
        setAttachments(attachmentData);
      } else {
        setAttachments([]);
      }
    } catch (error: any) {
      console.error('获取附件失败:', {
        error: error.message,
        response: error.response?.data,
        rawResponse: error.response
      });
      message.error('获取附件信息失败');
    }
  };

  // 修改点击处理函数，添加加载附件信息
  const handlePlanClick = (plan: RecruitmentPlan) => {
    setCurrentPlan(plan);
    setShowDetail(true);
    // 加载附件信息
    loadAttachments(plan.planId);
    
    // 设置上一篇下一篇
    const currentIndex = recruitmentPlans.findIndex(p => p.planId === plan.planId);
    setPrevPlan(currentIndex > 0 ? recruitmentPlans[currentIndex - 1] : null);
    setNextPlan(currentIndex < recruitmentPlans.length - 1 ? recruitmentPlans[currentIndex + 1] : null);
    
    // 更新 URL
    window.history.pushState(
      {}, 
      '', 
      `${window.location.pathname}?menuId=${menuId}&planId=${plan.planId}`
    );
  };

  // 修改返回按钮处理函数
  const handleBack = () => {
    setShowDetail(false);
    setCurrentPlan(null);
    // 移除 planId 参数
    window.history.pushState(
      {}, 
      '', 
      `${window.location.pathname}?menuId=${menuId}`
    );
  };

  // 修改下载处理函数
  const handleDownload = async (planId: number, fileName: string) => {
    try {
      const response = await downloadPlanAttachment(planId);
      // 直接创建下载链接
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      message.success('文件下载成功');
    } catch (error: any) {
      console.error('下载文件失败:', error);
      message.error('下载文件失败');
    }
  };

  // 添加处理函数
  const handleApply = (deptId: string, positionNumber: string, positionName: string) => {
    setSelectedPosition({ deptId, positionNumber, positionName });
    setIsModalOpen(true);
  };

  // 修改处理函数
  const handleModalOk = async () => {
    try {
      const values = await form.validateFields();
      
      // 获取上传的文件
      const fileList = form.getFieldValue('resume')?.fileList;
      console.log('文件列表:', fileList);
      
      if (!fileList || fileList.length === 0) {
        throw new Error('请上传简历文件');
      }

      const uploadFile = fileList[0].originFileObj;
      console.log('上传文件信息:', {
        name: uploadFile.name,
        type: uploadFile.type,
        size: uploadFile.size
      });

      // 使用 uploadResume 函数
      const response = await uploadResume({
        name: values.name,
        email: values.email,
        phone: values.phone,
        resume: uploadFile,
        planId: currentPlan?.planId,
        deptId: selectedPosition.deptId,
        positionNumber: selectedPosition.positionNumber,
      });

      console.log('提交响应:', response);

      if (response.code === 1) {
        message.success('简历提交成功');
        setIsModalOpen(false);
        form.resetFields();
      } else {
        throw new Error(response.msg || '提交失败');
      }
    } catch (error: any) {
      console.error('提交失败:', error);
      message.error(error.message || '提交失败');
    }
  };

  const handleModalCancel = () => {
    setIsModalOpen(false);
    form.resetFields();
  };

  const fetchAnnouncements = async () => {
    try {
      setLoading(true);
      const response = await getRecruitmentAnnouncementsPaginated({
        page: currentPage,
        pageSize: pageSize
      });

      if (response && response.records) {
        const convertedRecords = response.records.map((record: any) => ({
          planId: record.planId,
          planName: record.planName,
          planCode: record.planCode,
          planType: record.planType,
          depts: record.depts?.map((dept: any) => ({
            numbering: dept.numbering,
            name: dept.name || dept.deptName || '',
            positions: dept.positions?.map((pos: any) => ({
              positionName: pos.positionName,
              positionNumber: pos.positionNumber,
              positionProperties: pos.positionProperties || '',
              jobDescription: pos.jobDescription,
              jobRequired: pos.jobRequired,
              person: pos.person,
              professionalSkillsRight: pos.professionalSkillsRight || 0,
              communicationSkillsRight: pos.communicationSkillsRight || 0,
              teamworkAbilityRight: pos.teamworkAbilityRight || 0
            })) || []
          })) || [],
          recruiterId: record.recruiterId,
          recruiterName: record.recruiterName,
          recruiterPhone: record.recruiterPhone,
          recruitmentConditions: record.recruitmentConditions,
          benefitsDescription: record.benefitsDescription,
          startDate: record.startDate,
          endDate: record.endDate,
          publishDate: record.publishDate,
          interviewProcess: record.interviewProcess,
          approveStatus: record.approveStatus,
          approverId: record.approverId,
          notes: record.notes,
          attachments: record.attachments,
          content: record.content,
          createdAt: record.createdAt,
          updatedAt: record.updatedAt,
          createdBy: record.createdBy,
          updatedBy: record.updatedBy
        })) as RecruitmentPlan[];

        setRecruitmentPlans(convertedRecords);
        setTotalPlans(response.total);
      } else {
        console.error('响应数据格式不正确:', response);
        message.error('获取招聘公告失败');
      }
    } catch (error) {
      console.error('获取招聘公告失败:', error);
      message.error('获取招聘公告失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className={`container ${mobileNavStyles.mobileNav} ${mobileNavStyles.sidebar} ${mobileNavStyles.overlay}`}>
      <nav 
        className={`top-nav ${isScrolled ? 'scrolled' : ''}`}
        onMouseEnter={() => setIsNavHovered(true)}
        onMouseLeave={() => setIsNavHovered(false)}
      >
        <div className="nav-content">
          <div className="left-section">
            <div className="logo">
              <Image 
                src={window.innerWidth > 768 ? (isNavHovered || isScrolled ? "/images/logo_xg.png" : "/images/logo.png") : "/images/logo.png"}
                alt="校徽" 
                width={160} 
                height={100} 
                style={{ 
                  width: 'auto', 
                  height: 'auto', 
                  maxHeight: '100%', 
                  objectFit: 'contain' as const,
                  marginTop: '-8px',
                  transition: 'opacity 0.3s ease'
                }}
              />
            </div>
          </div>
          <div className="nav-links">
            <div className="nav-links-center">
              <a href="https://www.guit.edu.cn" className="school-home">学校首页</a>
              <a href="/public/recruitment">部门首页</a>
              <a href={`/public/recruitment/announcements?menuId=1`}>部门介绍</a>
              <div className="dropdown">
                <a href={`/public/recruitment/announcements?menuId=2`} className="dropdown-trigger">
                  师德师风
                  <span className="arrow-down"></span>
                </a>
                <div className="dropdown-menu">
                  <a href={`/public/recruitment/announcements?menuId=2`}>师德师风</a>
                  <a href={`/public/recruitment/announcements?menuId=3`}>教师发展</a>
                  <a href={`/public/recruitment/announcements?menuId=4`}>师德师风举报</a>
                </div>
              </div>
              <a href={`/public/recruitment/announcements?menuId=5`}>人才招聘</a>
              <a href={`/public/recruitment/announcements?menuId=6`}>职称评审</a>
              <a href={`/public/recruitment/announcements?menuId=7`}>资料下载</a>
              <a href={`/public/recruitment/announcements?menuId=8`}>办事流程</a>
            </div>
          </div>
          <div className="right-section">
            <div className="search-box">
              <input 
                type="text" 
                placeholder="搜索职位、公告..." 
                className="search-input"
              />
              <MdSearch size={20} className="search-icon" />
            </div>
            <div className="login-wrapper">
              <button onClick={handleButtonClick} className="login-button">
                <MdLogin size={20} />
                <span>{isLoggedIn ? '返回系统' : '登录系统'}</span>
              </button>
            </div>
          </div>
          <button 
            className={`mobile-menu-button ${isSidebarOpen ? 'open' : ''}`}
            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </nav>

      <div style={{ 
        minHeight: '100vh',
        display: 'flex', 
        flexDirection: 'column'
      }}>
        <div className="banner" style={{ position: 'relative' }}>
          <Image
            src="/images/xxdm.jpg"
            alt="校园大门"
            width={1920}
            height={400}
            priority
            style={{
              width: '100%',
              height: '400px',
              objectFit: 'cover',
              objectPosition: 'center 0'
            }}
          />
          <Box
            sx={{
              position: 'absolute',
              bottom: '0%',
              left: '10%',
              zIndex: 20
            }}
          >
            <Paper
              elevation={4}
              sx={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 2,
                p: 2,
                background: 'linear-gradient(135deg, #c1272d 0%, #8b0000 100%)',
                borderRadius: '16px',
                boxShadow: '0 4px 20px rgba(193, 39, 45, 0.2)'
              }}
            >
              <Box
                sx={{
                  width: 50,
                  height: 50,
                  bgcolor: 'rgba(255, 255, 255, 0.2)',
                  borderRadius: '50%',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  backdropFilter: 'blur(8px)'
                }}
              >
                {menuId && MENU_MAPPING[menuId]?.icon ? (
                  React.cloneElement(MENU_MAPPING[menuId].icon, { 
                    style: { 
                      fontSize: '28px', 
                      color: 'white'
                    } 
                  })
                ) : (
                  <MdSchool style={{ fontSize: '28px', color: 'white' }} />
                )}
              </Box>
              <Typography 
                sx={{ 
                  color: 'white',
                  fontFamily: '"楷体", KaiTi, serif',
                  fontSize: 24,
                  fontWeight: 'bold',
                  textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)'
                }}
              >
                {pageTitle}
              </Typography>
            </Paper>
          </Box>
        </div>

        <main style={{ flex: 1 }}>
          <Box 
            sx={{ 
              maxWidth: 1200, 
              mx: 'auto', 
              px: 3,
              mt: 8,
              position: 'relative',
              zIndex: 1
            }}
          >
            <Paper 
              elevation={3}
              sx={{
                p: 3,
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                borderRadius: 2,
                mb: 4,
                background: 'linear-gradient(120deg, #fff 0%, #f8f9fa 50%, rgba(193, 39, 45, 0.05) 100%)',
                boxShadow: '0 4px 20px rgba(0,0,0,0.05)',
                transition: 'all 0.3s ease',
                position: 'relative',
                overflow: 'hidden',
                '&::before': {
                  content: '""',
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  right: 0,
                  bottom: 0,
                  background: 'linear-gradient(120deg, transparent 0%, rgba(193, 39, 45, 0.03) 50%, transparent 100%)',
                  transform: 'translateX(-100%)',
                  transition: 'transform 0.6s ease',
                },
                '&:hover': {
                  transform: 'translateY(-2px)',
                  boxShadow: '0 6px 24px rgba(193, 39, 45, 0.12)',
                  '&::before': {
                    transform: 'translateX(100%)',
                  }
                }
              }}
            >
              {/* 左侧标题和竖线 */}
              <Box sx={{ 
                display: 'flex', 
                alignItems: 'center',
                gap: 2 
              }}>
                <Divider 
                  orientation="vertical" 
                  flexItem 
                  sx={{ 
                    height: 20, 
                    borderColor: '#c1272d',
                    borderRightWidth: 3
                  }} 
                />
                <Typography 
                  variant="h6" 
                  sx={{ 
                    color: '#333',
                    fontSize: '1rem',
                    fontWeight: 500,
                    position: 'relative',
                    '&::after': {
                      content: '""',
                      position: 'absolute',
                      bottom: -4,
                      left: 0,
                      width: '100%',
                      height: 2,
                      background: '#c1272d',
                      transform: 'scaleX(0)',
                      transition: 'transform 0.3s ease',
                      transformOrigin: 'right'
                    },
                    '&:hover::after': {
                      transform: 'scaleX(1)',
                      transformOrigin: 'left'
                    }
                  }}
                >
                  {pageTitle}
                </Typography>
              </Box>

              {/* 右侧面包屑导航 */}
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                <Breadcrumbs
                  separator={<NavigateNextIcon sx={{ fontSize: 16, color: '#666' }} />}
                  aria-label="breadcrumb"
                >
                  <MuiLink
                    underline="hover"
                    sx={{ 
                      display: 'flex',
                      alignItems: 'center',
                      gap: 1,
                      '&:hover': { 
                        color: '#c1272d',
                        transform: 'translateX(2px)',
                        transition: 'all 0.3s ease'
                      }
                    }}
                    href="/public/recruitment"
                  >
                    <Box 
                      sx={{ 
                        display: 'flex',
                        alignItems: 'center',
                        p: 0.5,
                        borderRadius: '50%',
                        bgcolor: 'rgba(193, 39, 45, 0.1)',
                      }}
                    >
                      <HomeOutlined sx={{ fontSize: 18, color: '#c1272d' }} />
                    </Box>
                    部门首页
                  </MuiLink>
                  <MuiLink
                    underline="hover"
                    sx={{ 
                      '&:hover': { color: '#c1272d' }
                    }}
                    href={`${window.location.pathname}?menuId=${menuId}`}
                  >
                    {menuId === '5' ? '人才招聘' : pageTitle}
                  </MuiLink>
                  {showDetail && (
                    <Typography sx={{ color: '#c1272d' }}>
                      正文
                    </Typography>
                  )}
                </Breadcrumbs>
              </Box>
            </Paper>

            <Box sx={{ 
              display: 'flex', 
              justifyContent: 'center', 
              mb: 4,
              position: 'relative',
              mt: 4
            }}>
              <Divider sx={{ width: '60%' }} />
            </Box>

            {!showDetail ? (
              menuId === '5' ? (
                // 招聘计划列表
                <List sx={{ bgcolor: 'background.paper', borderRadius: 1 }}>
                  {recruitmentPlans.map((plan) => (
                    <ListItem
                      key={plan.planId}
                      sx={{
                        textDecoration: 'none',
                        borderBottom: '1px dashed #e0e0e0',
                        py: 2,
                        position: 'relative',
                        overflow: 'hidden',
                        display: 'flex',
                        alignItems: 'center',
                        color: '#333',
                        cursor: 'pointer',
                        transition: 'all 0.3s ease',
                        '&::before': {
                          content: '""',
                          position: 'absolute',
                          top: 0,
                          left: '-100%',
                          width: '100%',
                          height: '100%',
                          background: 'rgba(193, 39, 45, 0.08)',
                          transition: 'left 0.3s ease',
                          zIndex: 0
                        },
                        '&:hover': {
                          color: '#c1272d',
                          backgroundColor: 'rgba(193, 39, 45, 0.02)',
                          '&::before': {
                            left: 0
                          }
                        }
                      }}
                      onClick={() => handlePlanClick(plan)}
                    >
                      <Typography 
                        sx={{ 
                          color: '#666',
                          width: 120, 
                          flexShrink: 0,
                          position: 'relative',
                          zIndex: 1,
                          fontWeight: 500
                        }}
                      >
                        {dayjs(plan.publishDate).format('YYYY-MM-DD')}
                      </Typography>
                      <Box
                        sx={{
                          flex: 1,
                          display: 'flex',
                          alignItems: 'center',
                          position: 'relative',
                          zIndex: 1
                        }}
                      >
                        <Typography
                          sx={{
                            flex: 1,
                            mr: 1,
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            fontSize: '1rem',
                            fontWeight: 400,
                            color: 'inherit'
                          }}
                        >
                          {plan.planName}
                        </Typography>
                        {plan.attachments && (
                          <Box
                            component="span"
                            sx={{
                              display: 'inline-flex',
                              alignItems: 'center',
                              color: '#666',
                              fontSize: '0.875rem',
                              fontWeight: 500,
                              ml: 2
                            }}
                          >
                            [附件]
                          </Box>
                        )}
                      </Box>
                    </ListItem>
                  ))}
                </List>
              ) : (
                // 其他文章列表
                <List sx={{ bgcolor: 'background.paper', borderRadius: 1 }}>
                  {articles.map((article) => (
                    <ListItem
                      key={article.id}
                      sx={{
                        textDecoration: 'none',
                        borderBottom: '1px dashed #e0e0e0',
                        py: 2,
                        position: 'relative',
                        overflow: 'hidden',
                        display: 'flex',
                        alignItems: 'center',
                        color: '#333',
                        cursor: 'pointer',
                        transition: 'all 0.3s ease',
                        '&::before': {
                          content: '""',
                          position: 'absolute',
                          top: 0,
                          left: '-100%',
                          width: '100%',
                          height: '100%',
                          background: 'rgba(193, 39, 45, 0.08)',
                          transition: 'left 0.3s ease',
                          zIndex: 0
                        },
                        '&:hover': {
                          color: '#c1272d',
                          backgroundColor: 'rgba(193, 39, 45, 0.02)',
                          '&::before': {
                            left: 0
                          }
                        }
                      }}
                      onClick={() => loadArticleDetail(article.id)}
                    >
                      <Typography 
                        sx={{ 
                          color: '#666',
                          width: 120, 
                          flexShrink: 0,
                          position: 'relative',
                          zIndex: 1,
                          fontWeight: 500
                        }}
                      >
                        {dayjs(article.publishDate).format('YYYY-MM-DD')}
                      </Typography>
                      <Box
                        sx={{
                          flex: 1,
                          display: 'flex',
                          alignItems: 'center',
                          position: 'relative',
                          zIndex: 1
                        }}
                      >
                        <Typography
                          sx={{
                            flex: 1,
                            mr: 1,
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            fontSize: '1rem',
                            fontWeight: 400,
                            color: 'inherit'
                          }}
                        >
                          {article.title}
                        </Typography>
                        {article.hasAttachment && (
                          <Box
                            component="span"
                            sx={{
                              display: 'inline-flex',
                              alignItems: 'center',
                              color: '#666',
                              fontSize: '0.875rem',
                              fontWeight: 500,
                              ml: 2,
                              '& svg': {
                                fontSize: '1rem',
                                ml: 0.5
                              }
                            }}
                          >
                            [附件]
                          </Box>
                        )}
                      </Box>
                    </ListItem>
                  ))}
                </List>
              )
            ) : (
              // 文章详情视图
              <Paper sx={{ p: 3, mb: 4 }}>
                <Box sx={{ mb: 3 }}>
                  <Button
                    startIcon={<ArrowBack />}
                    onClick={handleBack}
                    sx={{
                      color: '#666',
                      '&:hover': { color: '#c1272d' }
                    }}
                  >
                    返回列表
                  </Button>
                </Box>
                
                {menuId === '5' ? (
                  // 招聘计划详情
                  <Box sx={{ mb: 4 }}>
                    {/* 保持原有的招聘计划详情渲染代码 */}
                    <Typography variant="h4" sx={{ 
                      textAlign: 'center',
                      color: '#333',
                      fontWeight: 500,
                      mb: 2
                    }}>
                      {currentPlan?.planName}
                    </Typography>
                    
                    {/* 基本信息 */}
                    <Box sx={{ 
                      display: 'flex',
                      justifyContent: 'center',
                      gap: 4,
                      color: '#666',
                      mb: 4
                    }}>
                      <Typography>
                        发布时间：{dayjs(currentPlan?.publishDate).format('YYYY-MM-DD')}
                      </Typography>
                      <Typography>
                        招聘时间：{dayjs(currentPlan?.startDate).format('YYYY-MM-DD')} 至 {dayjs(currentPlan?.endDate).format('YYYY-MM-DD')}
                      </Typography>
                      <Typography>
                        计划编号：{currentPlan?.planCode}
                      </Typography>
                      <Typography>
                        计划类型：{
                          currentPlan?.planType === 1 ? '管理岗位' :
                          currentPlan?.planType === 2 ? '专任教师' :
                          currentPlan?.planType === 3 ? '其他岗位' : '未知'
                        }
                      </Typography>
                    </Box>

                    {/* 公告内容 */}
                    {currentPlan?.content && (
                      <Box sx={{ mb: 4 }}>
                        <Typography variant="h6" sx={{ mb: 2, color: '#333' }}>
                          公告内容
                        </Typography>
                        <Typography 
                          sx={{ 
                            color: '#666', 
                            whiteSpace: 'pre-wrap',
                            lineHeight: 1.8
                          }}
                        >
                          {currentPlan.content}
                        </Typography>
                      </Box>
                    )}

                    {/* 面试流程 */}
                    {currentPlan?.interviewProcess && (
                      <Box sx={{ mb: 4 }}>
                        <Typography variant="h6" sx={{ mb: 2, color: '#333' }}>
                          面试流程
                        </Typography>
                        <Typography 
                          sx={{ 
                            color: '#666', 
                            whiteSpace: 'pre-wrap',
                            lineHeight: 1.8
                          }}
                        >
                          {currentPlan.interviewProcess}
                        </Typography>
                      </Box>
                    )}

                    {/* 备注说明 */}
                    {currentPlan?.notes && (
                      <Box sx={{ mb: 4 }}>
                        <Typography variant="h6" sx={{ mb: 2, color: '#333' }}>
                          备注说明
                        </Typography>
                        <Typography 
                          sx={{ 
                            color: '#666', 
                            whiteSpace: 'pre-wrap',
                            lineHeight: 1.8
                          }}
                        >
                          {currentPlan.notes}
                        </Typography>
                      </Box>
                    )}

                    {/* 审批状态 */}
                    <Box sx={{ mb: 4 }}>
                      <Typography variant="h6" sx={{ mb: 2, color: '#333' }}>
                        审批状态
                      </Typography>
                      <Typography sx={{ color: '#666' }}>
                        {
                          currentPlan?.approveStatus === 0 ? '发布未审批' :
                          currentPlan?.approveStatus === 1 ? '修改未审批' :
                          currentPlan?.approveStatus === 2 ? '已通过' :
                          currentPlan?.approveStatus === 3 ? '已拒绝' : '未知状态'
                        }
                      </Typography>
                    </Box>

                    {/* 创建和更新信息 */}
                    <Box sx={{ 
                      display: 'flex',
                      gap: 4,
                      color: '#666',
                      mt: 4,
                      pt: 2,
                      borderTop: '1px dashed #e0e0e0'
                    }}>
                      <Typography>
                        创建人：{currentPlan?.createdBy}
                      </Typography>
                      <Typography>
                        创建时间：{dayjs(currentPlan?.createdAt).format('YYYY-MM-DD HH:mm:ss')}
                      </Typography>
                      <Typography>
                        更新人：{currentPlan?.updatedBy}
                      </Typography>
                      <Typography>
                        更新时间：{dayjs(currentPlan?.updatedAt).format('YYYY-MM-DD HH:mm:ss')}
                      </Typography>
                    </Box>

                    {/* 招聘条件和福利说明 */}
                    {(currentPlan?.recruitmentConditions || currentPlan?.benefitsDescription) && (
                      <Box sx={{ mb: 4 }}>
                        {currentPlan?.recruitmentConditions && (
                          <Box sx={{ mb: 3 }}>
                            <Typography variant="h6" sx={{ mb: 1, color: '#333' }}>
                              招聘条件
                            </Typography>
                            <Typography sx={{ color: '#666', whiteSpace: 'pre-wrap' }}>
                              {currentPlan?.recruitmentConditions}
                            </Typography>
                          </Box>
                        )}
                        {currentPlan?.benefitsDescription && (
                          <Box>
                            <Typography variant="h6" sx={{ mb: 1, color: '#333' }}>
                              福利说明
                            </Typography>
                            <Typography sx={{ color: '#666', whiteSpace: 'pre-wrap' }}>
                              {currentPlan?.benefitsDescription}
                            </Typography>
                          </Box>
                        )}
                      </Box>
                    )}

                    {/* 岗位信息表格 */}
                    {currentPlan?.depts && currentPlan.depts.map((dept, index) => (
                      <Box key={index} sx={{ mb: 4 }}>
                        <Typography variant="h6" sx={{ mb: 2, color: '#333' }}>
                          {dept.name}（部门编号：{dept.numbering}）
                        </Typography>
                        <TableContainer component={Paper}>
                          <Table>
                            <TableHead>
                              <TableRow sx={{ bgcolor: '#f5f5f5' }}>
                                <TableCell>岗位编号</TableCell>
                                <TableCell>岗位名称</TableCell>
                                <TableCell>岗位性质</TableCell>
                                <TableCell>岗位描述</TableCell>
                                <TableCell>任职要求</TableCell>
                                <TableCell>招聘人数</TableCell>
                                <TableCell>技能要求</TableCell>
                              </TableRow>
                            </TableHead>
                            <TableBody>
                              {dept.positions.map((position, posIndex) => (
                                <TableRow key={posIndex}>
                                  <TableCell>{position.positionNumber || '—'}</TableCell>
                                  <TableCell>{position.positionName}</TableCell>
                                  <TableCell>{position.positionProperties || '—'}</TableCell>
                                  <TableCell>{position.jobDescription}</TableCell>
                                  <TableCell>{position.jobRequired}</TableCell>
                                  <TableCell>{position.person}</TableCell>
                                  <TableCell>
                                    <Box sx={{ 
                                      display: 'flex',
                                      flexDirection: 'column',
                                      gap: 1
                                    }}>
                                      {/* 保留技能占比渲染 */}
                                      <Typography sx={{ 
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'space-between',
                                        color: '#666'
                                      }}>
                                        <span>专业技能占比：</span>
                                        <span style={{ 
                                          color: '#c1272d',
                                          fontWeight: 500 
                                        }}>
                                          {position.professionalSkillsRight}%
                                        </span>
                                      </Typography>
                                      <Typography sx={{ 
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'space-between',
                                        color: '#666'
                                      }}>
                                        <span>沟通能力占比：</span>
                                        <span style={{ 
                                          color: '#c1272d',
                                          fontWeight: 500 
                                        }}>
                                          {position.communicationSkillsRight}%
                                        </span>
                                      </Typography>
                                      <Typography sx={{ 
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'space-between',
                                        color: '#666'
                                      }}>
                                        <span>团队协作占比：</span>
                                        <span style={{ 
                                          color: '#c1272d',
                                          fontWeight: 500 
                                        }}>
                                          {position.teamworkAbilityRight}%
                                        </span>
                                      </Typography>
                                      <Typography sx={{ 
                                        fontSize: '0.75rem',
                                        color: '#999',
                                        mt: 1,
                                        fontStyle: 'italic'
                                      }}>
                                        （以上百分比为面试评分权重）
                                      </Typography>

                                      {/* 添加应聘按钮 */}
                                      {position.person > 0 && (
                                        <Button
                                          variant="contained"
                                          size="small"
                                          onClick={() => handleApply(dept.numbering, position.positionNumber, position.positionName)}
                                          sx={{
                                            mt: 2,
                                            bgcolor: '#c1272d',
                                            '&:hover': {
                                              bgcolor: '#a61f24'
                                            }
                                          }}
                                        >
                                          我要应聘
                                        </Button>
                                      )}
                                    </Box>
                                  </TableCell>
                                </TableRow>
                              ))}
                            </TableBody>
                          </Table>
                        </TableContainer>
                      </Box>
                    ))}

                    {/* 联系方式 */}
                    {currentPlan?.recruiterName && (
                      <Box sx={{ mt: 4 }}>
                        <Typography variant="h6" sx={{ mb: 2, color: '#333' }}>
                          联系方式
                        </Typography>
                        <Box sx={{ display: 'flex', gap: 4, color: '#666' }}>
                          <Typography>
                            联系人：{currentPlan.recruiterName}
                          </Typography>
                          <Typography>
                            联系电话：{currentPlan.recruiterPhone}
                          </Typography>
                        </Box>
                      </Box>
                    )}

                    {/* 附件 */}
                    {attachments.length > 0 && (
                      <Box sx={{ mt: 4 }}>
                        <Typography variant="h6" sx={{ mb: 2, color: '#333' }}>
                          附件列表
                        </Typography>
                        <List>
                          {attachments.map((file, index) => (
                            <ListItem
                              key={index}
                              sx={{
                                display: 'flex',
                                alignItems: 'center',
                                gap: 2,
                                py: 1,
                                borderBottom: '1px dashed #e0e0e0'
                              }}
                            >
                              <MdFileDownload size={24} color="#666" />
                              <Box sx={{ flex: 1 }}>
                                <Typography 
                                  sx={{ 
                                    color: '#666',
                                    fontSize: '0.9rem'
                                  }}
                                >
                                  {file.fileName}
                                </Typography>
                                <Typography 
                                  sx={{ 
                                    color: '#999',
                                    fontSize: '0.75rem'
                                  }}
                                >
                                  {file.contentType} • {(file.fileSize / 1024 / 1024).toFixed(2)}MB
                                </Typography>
                              </Box>
                              <Button
                                variant="outlined"
                                size="small"
                                startIcon={<MdFileDownload />}
                                onClick={() => handleDownload(currentPlan?.planId || 0, file.fileName)}
                                sx={{
                                  color: '#666',
                                  borderColor: '#d0d0d0',
                                  '&:hover': {
                                    color: '#c1272d',
                                    borderColor: '#c1272d',
                                    bgcolor: 'rgba(193, 39, 45, 0.04)'
                                  }
                                }}
                              >
                                下载
                              </Button>
                            </ListItem>
                          ))}
                        </List>
                      </Box>
                    )}
                  </Box>
                ) : (
                  // 普通文章详情
                  <Box sx={{ mb: 4 }}>
                    <Typography variant="h4" sx={{ 
                      textAlign: 'center',
                      color: '#333',
                      fontWeight: 500,
                      mb: 2
                    }}>
                      {currentArticle?.title}
                    </Typography>
                    
                    <Box sx={{ 
                      display: 'flex',
                      justifyContent: 'center',
                      gap: 4,
                      color: '#666',
                      mb: 4
                    }}>
                      <Typography>
                        发布时间：{dayjs(currentArticle?.publishDate).format('YYYY-MM-DD')}
                      </Typography>
                      <Typography>
                        作者：{currentArticle?.author || '管理员'}
                      </Typography>
                      <Typography>
                        浏览次数：{currentArticle?.viewCount}
                      </Typography>
                    </Box>

                    {/* 文章内容 */}
                    <Box sx={{ 
                      color: '#333',
                      lineHeight: 1.8,
                      '& p': { mb: 2 }
                    }}>
                      <div dangerouslySetInnerHTML={{ __html: currentArticle?.content || '' }} />
                    </Box>
                  </Box>
                )}
              </Paper>
            )}

            {!showDetail ? (
              // 列表页显示分页
              <Box 
                sx={{ 
                  display: 'flex', 
                  flexDirection: { xs: 'column', sm: 'row' },
                  justifyContent: 'center',
                  alignItems: 'center',
                  gap: 3,
                  mt: 4,
                  mb: 6
                }}
              >
                <Pagination 
                  total={menuId === '5' ? totalPlans : articles.length}
                  current={currentPage}
                  pageSize={pageSize}
                  onChange={handlePageChange}
                  showSizeChanger={false}
                />
                <Paper
                  elevation={0}
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1,
                    p: 1,
                    borderRadius: 2,
                    bgcolor: 'rgba(0, 0, 0, 0.02)',
                    border: '1px solid rgba(0, 0, 0, 0.06)'
                  }}
                >
                  <Typography sx={{ color: '#666' }}>转到</Typography>
                  <input 
                    type="text" 
                    style={{
                      width: 50,
                      height: 32,
                      border: '1px solid #e0e0e0',
                      borderRadius: 8,
                      textAlign: 'center',
                      fontSize: '14px'
                    }}
                  /> 
                  <Typography sx={{ color: '#666' }}>页</Typography>
                </Paper>
              </Box>
            ) : (
              // 详情页显示上一篇下一篇导航
              <Box sx={{ 
                display: 'flex',
                justifyContent: 'space-between',
                mt: 4,
                pt: 3,
                borderTop: '1px dashed #e0e0e0'
              }}>
                <Button
                  startIcon={<NavigateNextIcon sx={{ transform: 'rotate(180deg)' }} />}
                  disabled={menuId === '5' ? !prevPlan : !prevArticle}
                  onClick={() => {
                    if (menuId === '5' && prevPlan) {
                      handlePlanClick(prevPlan);
                    } else if (menuId !== '5' && prevArticle) {
                      loadArticleDetail(prevArticle.id);
                    }
                  }}
                  sx={{
                    color: (menuId === '5' ? prevPlan : prevArticle) ? '#666' : '#999',
                    '&:hover': (menuId === '5' ? prevPlan : prevArticle) ? {
                      color: '#c1272d',
                      bgcolor: 'rgba(193, 39, 45, 0.04)'
                    } : {}
                  }}
                >
                  {menuId === '5' ? (
                    prevPlan ? (
                      <Box sx={{ textAlign: 'left' }}>
                        <Typography sx={{ fontSize: '0.75rem', color: '#999', mb: 0.5 }}>
                          上一篇
                        </Typography>
                        <Typography sx={{ 
                          fontSize: '0.875rem',
                          maxWidth: 300,
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap'
                        }}>
                          {prevPlan.planName}
                        </Typography>
                      </Box>
                    ) : '没有上一篇'
                  ) : (
                    prevArticle ? (
                      <Box sx={{ textAlign: 'left' }}>
                        <Typography sx={{ fontSize: '0.75rem', color: '#999', mb: 0.5 }}>
                          上一篇
                        </Typography>
                        <Typography sx={{ 
                          fontSize: '0.875rem',
                          maxWidth: 300,
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap'
                        }}>
                          {prevArticle.title}
                        </Typography>
                      </Box>
                    ) : '没有上一篇'
                  )}
                </Button>
                <Button
                  endIcon={<NavigateNextIcon />}
                  disabled={menuId === '5' ? !nextPlan : !nextArticle}
                  onClick={() => {
                    if (menuId === '5') {
                      nextPlan && handlePlanClick(nextPlan);
                    } else {
                      nextArticle && loadArticleDetail(nextArticle.id);
                    }
                  }}
                  sx={{
                    color: (menuId === '5' ? nextPlan : nextArticle) ? '#666' : '#999',
                    '&:hover': (menuId === '5' ? nextPlan : nextArticle) ? {
                      color: '#c1272d',
                      bgcolor: 'rgba(193, 39, 45, 0.04)'
                    } : {}
                  }}
                >
                  {menuId === '5' ? (
                    nextPlan ? (
                      <Box sx={{ textAlign: 'right' }}>
                        <Typography sx={{ fontSize: '0.75rem', color: '#999', mb: 0.5 }}>
                          下一篇
                        </Typography>
                        <Typography sx={{ 
                          fontSize: '0.875rem',
                          maxWidth: 300,
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap'
                        }}>
                          {nextPlan.planName}
                        </Typography>
                      </Box>
                    ) : '没有下一篇'
                  ) : (
                    nextArticle ? (
                      <Box sx={{ textAlign: 'right' }}>
                        <Typography sx={{ fontSize: '0.75rem', color: '#999', mb: 0.5 }}>
                          下一篇
                        </Typography>
                        <Typography sx={{ 
                          fontSize: '0.875rem',
                          maxWidth: 300,
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap'
                        }}>
                          {nextArticle.title}
                        </Typography>
                      </Box>
                    ) : '没有下一篇'
                  )}
                </Button>
              </Box>
            )}
          </Box>
        </main>

        <footer style={{
          background: '#931A1DF2',
          color: '#fff',
          width: '100%',
          height: '59px',
          marginTop: 'auto',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          backdropFilter: 'blur(8px)',
          WebkitBackdropFilter: 'blur(8px)'
        }}>
          <div style={{ 
            fontSize: '14px',
            textAlign: 'center'
          }}>
            © 2024 桂林信息科技学院人事处. All rights reserved.
          </div>
        </footer>
      </div>

      <div className={`sidebar-overlay ${isSidebarOpen ? 'visible' : ''}`} onClick={() => setIsSidebarOpen(false)} />
      <div className={`sidebar ${isSidebarOpen ? 'open' : ''}`}>
        <button 
          className="close-button"
          onClick={() => setIsSidebarOpen(false)}
        >
          <span></span>
          <span></span>
        </button>
        <div className="sidebar-top">
          <div className="search-box">
            <input type="text" placeholder="搜索职位、公告..." />
            <MdSearch size={20} className="search-icon" />
          </div>
          <button onClick={handleButtonClick} className="login-button">
            <MdLogin size={20} />
            <span>{isLoggedIn ? '返回系统' : '登录系统'}</span>
          </button>
        </div>
        <div className="sidebar-content">
          <div className="sidebar-menu">
            <a href="https://www.guit.edu.cn">学校首页</a>
            <a href="/public/recruitment">部门首页</a>
            {Object.entries(MENU_MAPPING).map(([key, value]) => (
              value.title === '师德师风' ? (
                <div key={key} className="dropdown-items">
                  <a href={`${value.path}?menuId=${key}`}>师德师风</a>
                  <a href={`${MENU_MAPPING['3'].path}?menuId=3`}>教师发展</a>
                  <a href={`${MENU_MAPPING['4'].path}?menuId=4`}>师德师风举报</a>
                </div>
              ) : !['3', '4'].includes(key) && (
                <a key={key} href={`${value.path}?menuId=${key}`}>
                  {value.title}
                </a>
              )
            ))}
          </div>
        </div>
      </div>

      {/* 添加应聘模态框 */}
      <Modal
        title={`应聘申请 - ${selectedPosition.positionName}`}
        open={isModalOpen}
        onOk={handleModalOk}
        onCancel={handleModalCancel}
        okText="提交"
        cancelText="取消"
      >
        <Form
          form={form}
          layout="vertical"
          requiredMark={false}
        >
          <Form.Item
            name="name"
            label="姓名"
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input placeholder="请输入姓名" />
          </Form.Item>

          <Form.Item
            name="email"
            label="电子邮箱"
            rules={[
              { required: true, message: '请输入电子邮箱' },
              { type: 'email', message: '请输入有效的电子邮箱' }
            ]}
          >
            <Input placeholder="请输入电子邮箱" />
          </Form.Item>

          <Form.Item
            name="phone"
            label="联系电话"
            rules={[
              { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码' }
            ]}
          >
            <Input placeholder="请输入联系电话" />
          </Form.Item>

          <Form.Item
            name="resume"
            label="简历文件"
            rules={[{ required: true, message: '请上传简历文件' }]}
            extra="支持 .xlsx 格式的文件"
          >
            <Upload
              accept=".xlsx"
              maxCount={1}
              beforeUpload={(file) => {
                console.log('选择的文件:', {
                  name: file.name,
                  type: file.type,
                  size: file.size
                });
                const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                if (!isXlsx) {
                  message.error('只能上传 xlsx 格式的文件！');
                }
                return false;
              }}
              onChange={(info) => {
                console.log('文件变更:', info.fileList);
              }}
            >
              <Button type="button">
                <UploadOutlined />
                选择文件
              </Button>
            </Upload>
          </Form.Item>
        </Form>
      </Modal>

      <style jsx>{`
        /* ====== 容器基础样式 ====== */
        .container {
          min-height: 100vh;
          background: #fff;
          margin: 0;
          padding: 0;
          overflow-x: hidden;
        }

        /* ====== 导航栏样式 ====== */
        .top-nav {
          position: fixed;
          width: 100%;
          top: 0;
          z-index: 1000;
          background: transparent;
          transition: background 0.3s;
        }

        /* 移动端样式 */
        @media (max-width: 768px) {
          .top-nav {
            background: #001529; /* 移动端固定背景色 */
          }

          .top-nav::before {
            display: none; /* 移动端禁用动画效果 */
          }

          /* 移动端禁用所有hover和scroll效果 */
          .top-nav:hover::before,
          .top-nav.scrolled::before {
            height: 0;
          }

          /* 移动端固定logo样式 */
          .logo img {
            opacity: 1 !important;
            transition: none !important;
          }
        }

        .top-nav::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 0;
          background: #001529;
          transition: height 0.3s ease;
          z-index: -1;
        }

        .top-nav:hover::before,
        .top-nav.scrolled::before {
          height: 100%;
        }

        /* 确保导航内容在动画层之上 */
        .nav-content {
          position: relative;
          z-index: 1;
        }

        /* 导航链接颜色过渡 */
        .nav-links a {
          color: #fff;
          transition: color 0.3s ease;
        }

        .nav-content {
          max-width: 1600px;
          margin: 0 auto;
          padding: 0;
          display: flex;
          align-items: center;
          height: 100px;
        }

        /* ====== Logo区域样式 ====== */
        .left-section {
          position: absolute;
          left: -80px;
          top: -18px;
          z-index: 1000;
        }

        .logo {
          display: flex;
          align-items: center;
          width: 160px;
          height: 100px;
          padding: 4px 0;
        }

        .logo > :global(img) {
          width: auto !important;
          height: auto !important;
          max-height: 100% !important;
          object-fit: contain !important;
          margin-top: -8px;
        }

        /* ====== 导航链接样式 ====== */
        .nav-links {
          position: absolute;
          left: 50%;
          transform: translate(-50%, -36%);
          display: flex;
          justify-content: center;
          margin-left: 80px;
        }

        .nav-links-center {
          display: flex;
          align-items: center;
          gap: 36px;
          height: 100%;
          margin-right: 360px;
        }

        .nav-links-center a {
          color: #fff;
          text-decoration: none;
          font-size: 16px;
          padding: 8px 24px;
          margin: 0 -12px;
          height: 100%;
          display: flex;
          align-items: center;
          white-space: nowrap;
          position: relative;
          transition: all 0.3s ease;
        }

        .nav-links-center a:hover {
          background: linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.2)
          );
          transform: translateY(-2px);
          text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
          border-radius: 6px;
        }

        .nav-links-center a::after {
          content: '';
          position: absolute;
          bottom: -6px;
          left: 50%;
          width: 0;
          height: 2px;
          background: #1890ff;
          transition: all 0.3s ease;
          transform: translateX(-50%);
        }

        .nav-links-center a:hover::after {
          width: 80%;
        }

        .right-section {
          position: absolute;
          right: -20px;
          top: 35%;
          display: flex;
          align-items: center;
          gap: 32px;
          min-width: 320px;
          transform: translateY(-50%);
        }

        .search-box {
          display: flex;
          align-items: center;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 20px;
          padding: 6px 16px;
          width: 180px;
          margin-left: 16px;
        }

        .search-input {
          background: transparent;
          border: none;
          color: #fff;
          padding: 4px 8px;
          width: 100%;
          outline: none;
          font-size: 14px;
        }

        .search-input::placeholder {
          color: rgba(255, 255, 255, 0.6);
        }

        .search-icon {
          color: rgba(255, 255, 255, 0.8);
          transition: all 0.3s ease;
        }

        .login-wrapper {
          position: relative;
        }

        .login-button {
          position: relative;
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 20px;
          border-radius: 24px;
          background: rgba(255, 255, 255, 0.1);
          color: #fff;
          text-decoration: none;
          border: 1px solid rgba(255, 255, 255, 0.2);
          font-size: 14px;
          font-weight: 500;
          letter-spacing: 0.5px;
          overflow: hidden;
          cursor: pointer;
          user-select: none;
          outline: none;
          width: auto;
        }

        .login-button::after {
          content: '';
          display: block;
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          pointer-events: none;
          background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
          background-repeat: no-repeat;
          background-position: 50%;
          transform: scale(10, 10);
          opacity: 0;
          transition: transform .5s, opacity 1s;
        }

        .login-button:active::after {
          transform: scale(0, 0);
          opacity: .5;
          transition: 0s;
          background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) 10%, transparent 10.01%);
        }

        .login-button:hover {
          background: rgba(255, 255, 255, 0.15);
        }

        .login-button svg,
        .login-button span {
          position: relative;
          z-index: 1;
          pointer-events: none;
        }

        .mobile-menu-button {
          display: none;
        }

        @media (max-width: 1024px) {
          .nav-content {
            justify-content: center;
            padding: 0 16px;
            position: relative;
            height: 64px;
          }

          .left-section {
            position: static;
            left: auto;
            top: auto;
            transform: none;
          }

          .logo {
            position: absolute;
            left: 30%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
          }

          .logo img {
            height: 50px;
            width: auto;
            margin-top: 0;
          }

          .mobile-menu-button {
            display: flex;
            position: absolute;
            right: 16px;
            top: 28px;
            width: 28px;
            height: 18px;
            padding: 0;
            background: none;
            border: none;
            cursor: pointer;
            z-index: 1001;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
          }

          .mobile-menu-button span {
            display: block;
            width: 24px;
            height: 2px;
            background-color: #fff;
            transition: all 0.3s ease;
            border-radius: 2px;
          }

          .mobile-menu-button.open {
            position: fixed;
            right: 16px;
            top: 28px;
          }

          .sidebar {
            right: -320px;
            width: 300px;
          }

          .sidebar.open {
            right: 0;
          }

          .nav-links,
          .right-section {
            display: none;
          }

          .quick-links-grid {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 0 16px;
            max-width: 100%;
          }

          .quick-link-card {
            margin: 0;
            padding: 30px 20px;
            width: auto;
          }

          .guide-container {
            display: flex;
            flex-direction: column;
            gap: 24px;
            padding: 0 16px;
          }

          .news-section {
            order: 2;
            width: 100%;
          }

          .news-block {
            margin-bottom: 20px;
          }

          .block-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            margin-bottom: 16px;
          }

          .view-more {
            padding: 4px 12px;
            white-space: nowrap;
            color: #666;
            text-decoration: none;
            transition: color 0.3s;
            
            &:hover {
              color: #1890ff;
            }
          }

          .news-list {
            width: 100%;
          }

          .news-item {
            width: 100%;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;

            .title {
              width: calc(100% - 100px); // 留出日期的空间
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .guide-buttons {
            order: 1;
            display: flex;
            flex-direction: column;
            gap: 16px;
            width: 100%;
          }

          .guide-button {
            width: 100%;
            padding: 16px;
          }

          .banner {
            height: auto;
            min-height: 300px;
            padding: 60px 20px;
          }

          .banner-content {
            padding: 0 16px;
            width: 100%;
          }

          main {
            padding: 40px 16px;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
          }

          .section-title {
            font-size: 24px;
            margin-bottom: 30px;
            text-align: center;
            width: 90%;
          }
        }

        @media (max-width: 480px) {
          .banner h1 {
            font-size: 1.5em;
          }

          .banner-title {
            font-size: 2em;
          }

          .quick-link-card {
            padding: 24px 16px;
          }

          .icon-wrapper {
            width: 80px;
            height: 80px;
          }

          .news-item {
            flex-direction: column;
            gap: 8px;

            .date-block {
              margin-bottom: 8px;
            }

            .title {
              width: 100%;
            }
          }
        }

        /* ====== Banner样式 ====== */
        .banner {
          width: 100%;
          height: 400px;
          position: relative;
          overflow: hidden;
          margin-top: 0;
        }

        .banner::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
        }

        @media (max-width: 768px) {
          .banner {
            height: 200px;
          }
        }

        .section-title {
          font-size: 28px;
          font-weight: bold;
          margin-bottom: 40px;
          text-align: center;
          width: 100%;
          max-width: 1400px;
          margin-left: auto;
          margin-right: auto;
          padding: 0 20px;
          color: #000;
          position: relative;
        }

        .section-title::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 60px;
          height: 3px;
          background: linear-gradient(90deg, #1890ff, #69c0ff);
          border-radius: 2px;
        }

        .quick-links {
          padding: 60px 0;
          background: #fff;
          margin: 0;
          border-top: none;
        }

        .quick-links-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 40px;
          max-width: 1400px;
          margin: 0 auto;
          padding: 0 20px;
        }

        .quick-link-card {
          padding: 40px;
          margin: 10px;
          border-radius: 16px;
          text-align: center;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 20px;
          transition: all 0.3s ease;
          transform-style: preserve-3d;
          position: relative;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .quick-link-card.management {
          background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
        }

        .quick-link-card.teacher {
          background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 100%);
        }

        .quick-link-card.other {
          background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
        }

        .icon-wrapper {
          width: 100px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          margin-bottom: 16px;
          transition: all 0.3s ease;
        }

        .management .icon-wrapper {
          background: rgba(197, 31, 58, 0.1);
          color: #c51f3a;
        }

        .teacher .icon-wrapper {
          background: rgba(24, 144, 255, 0.1);
          color: #1890ff;
        }

        .other .icon-wrapper {
          background: rgba(255, 122, 0, 0.1);
          color: #ff7a00;
        }

        .quick-link-card h3 {
          font-size: 20px;
          color: #333;
          margin: 0;
          line-height: 1.5;
        }

        .apply-now {
          padding: 10px 32px;
          border-radius: 20px;
          border: none;
          color: white;
          font-size: 16px;
          cursor: pointer;
          transition: all 0.3s ease;
          margin-top: 16px;
        }

        .management .apply-now {
          background: #c51f3a;
        }

        .teacher .apply-now {
          background: #1890ff;
        }

        .other .apply-now {
          background: #ff7a00;
        }

        .apply-now:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .quick-link-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

        .quick-link-card:hover .icon-wrapper {
          transform: scale(1.1);
        }

        .recruitment-process {
          padding: 60px 20px;
          background: #fff;
          position: relative;
          overflow: hidden;
        }

        .timeline {
          max-width: 1200px;
          margin: 40px auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
          padding: 20px 0;
        }

        .timeline::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          right: 0;
          height: 2px;
          background: repeating-linear-gradient(
            90deg,
            #c51f3a 0px,
            #c51f3a 8px,
            transparent 8px,
            transparent 16px
          );
          transform: translateY(-50%);
          animation: flowLine 1s linear infinite;
        }

        @keyframes flowLine {
          0% {
            background-position: 0 0;
          }
          100% {
            background-position: 16px 0;
          }
        }

        .timeline-point-wrapper {
          width: 64px;
          height: 64px;
          border: 2px dashed #c51f3a;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 15px;
          position: relative;
          animation: rotateDashed 8s linear infinite;
        }

        .timeline-point-wrapper::before {
          content: '';
          position: absolute;
          top: -4px;
          left: -4px;
          right: -4px;
          bottom: -4px;
          border: 2px dashed #c51f3a;
          border-radius: 50%;
          opacity: 0.5;
          animation: rotateDashedReverse 6s linear infinite;
        }

        @keyframes rotateDashed {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }

        @keyframes rotateDashedReverse {
          from {
            transform: rotate(360deg);
          }
          to {
            transform: rotate(0deg);
          }
        }

        .timeline-point {
          width: 40px;
          height: 40px;
          background: #fff;
          border: 3px solid #c51f3a;
          border-radius: 50%;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.5s ease;
          z-index: 1;
        }

        .timeline-point.active {
          transform: scale(1.8);
          background: #fff;
        }

        .timeline-point.active + .timeline-point-wrapper {
          transform: scale(1.4);
          border-color: #c51f3a;
        }

        .timeline-point.active + .timeline-point-wrapper::before {
          transform: scale(1.3);
          border-color: #c51f3a;
        }

        .timeline-point :global(svg) {
          color: #c51f3a;
          transition: all 0.5s ease;
          font-size: 20px;
        }

        .timeline-point.active :global(svg) {
          transform: scale(1.2);
          color: #c51f3a;
        }

        .timeline-content {
          color: #333;
          font-size: 1.1em;
          font-weight: 500;
          text-align: center;
          transition: all 0.5s ease;
        }

        .timeline-item .timeline-point.active + .timeline-content {
          transform: scale(1.1);
          color: #c51f3a;
          font-weight: bold;
        }

        @media (max-width: 768px) {
          .timeline {
            flex-direction: column;
            gap: 30px;
          }

          .timeline::before {
            width: 2px;
            height: 100%;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
            background: repeating-linear-gradient(
              180deg,
              #c51f3a 0px,
              #c51f3a 8px,
              transparent 8px,
              transparent 16px
            );
            animation: flowLineVertical 1s linear infinite;
          }

          @keyframes flowLineVertical {
            0% {
              background-position: 0 0;
            }
            100% {
              background-position: 0 16px;
            }
          }
        }

        .arrow-start {
          position: absolute;
          left: -20px;
          top: 50%;
          transform: translateY(-50%);
          width: 20px;
          height: 20px;
          z-index: 2;
        }

        .arrow-head {
          width: 0;
          height: 0;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
          border-left: 15px solid #c51f3a;
          position: relative;
          animation: arrowPulse 1s infinite;
        }

        @keyframes arrowPulse {
          0% {
            transform: translateX(0);
            opacity: 1;
          }
          50% {
            transform: translateX(5px);
            opacity: 0.6;
          }
          100% {
            transform: translateX(0);
            opacity: 1;
          }
        }

        @media (max-width: 768px) {
          .arrow-start {
            left: 50%;
            top: -20px;
            transform: translateX(-50%) rotate(90deg);
          }
        }

        .has-submenu {
          position: relative;
        }

        .submenu {
          position: absolute;
          top: 100%;
          left: 0;
          background: #fff;
          border-radius: 4px;
          padding: 4px 0;
          min-width: 120px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
          opacity: 0;
          visibility: hidden;
          transform: translateY(-5px);
          transition: all 0.2s ease;
          z-index: 1000;
        }

        .has-submenu:hover .submenu {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }

        .submenu a {
          color: #333 !important;
          padding: 8px 16px !important;
          height: auto !important;
          font-size: 14px;
          display: block;
        }

        .submenu a:hover {
          color: #1890ff !important;
          background: rgba(24, 144, 255, 0.1) !important;
        }

        .site-footer {
          background: rgba(147, 26, 29, 0.95);
          color: #fff;
          padding: 20px 0;
          text-align: center;
          margin-top: 60px;
        }

        .footer-content {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 20px;
        }

        .copyright {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.8);
        }

        .recruitment-guide {
          padding: 60px 0;
          background: #f8f9fa;
        }

        .guide-container {
          max-width: 1400px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: 1.3fr 1fr;
          gap: 40px;
          padding: 0 20px;
        }

        .news-section {
          display: grid;
          grid-template-columns: 1fr;
          gap: 30px;
        }

        .news-block {
          transform: scale(0.92);
          transform-origin: center top;
          background: #fff;
          border-radius: 12px;
          padding: 24px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
          margin-bottom: 30px; /* 补偿缩放后的间距 */
        }

        .block-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          padding-bottom: 10px;
          border-bottom: 2px solid #f0f0f0;
        }

        .block-header h3 {
          font-size: 20px;
          color: #333;
          margin: 0;
        }

        .view-more {
          color: #666;
          text-decoration: none;
          transition: color 0.3s;
        }

        .view-more:hover {
          color: #c51f3a;
        }

        .news-list {
          display: flex;
          flex-direction: column;
          gap: 15px;
        }

        .news-item {
          display: flex;
          align-items: center;
          gap: 15px;
        }

        .date-block {
          display: flex;
          flex-direction: column;
          align-items: center;
          min-width: 60px;
        }

        .day {
          font-size: 24px;
          font-weight: bold;
          color: #c51f3a;
        }

        .month {
          font-size: 14px;
          color: #666;
        }

        .title {
          flex: 1;
          color: #333;
          text-decoration: none;
          transition: color 0.3s;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .title:hover {
          color: #c51f3a;
        }

        .guide-buttons {
          transform: scale(0.9);
          transform-origin: center top;
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 20px;
        }

        .guide-button {
          display: flex;
          align-items: center;
          gap: 20px;
          padding: 20px;
          border-radius: 12px;
          text-decoration: none;
          color: #fff;
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
        }

        .guide-button::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
          transform: translateX(-100%);
          transition: transform 0.6s ease;
        }

        .guide-button:hover::before {
          transform: translateX(100%);
        }

        .guide-button.campus {
          background: linear-gradient(45deg, #722ed1, #9254de);
        }

        .guide-button.download {
          background: linear-gradient(45deg, #13c2c2, #36cfc9);
        }

        .guide-button.ethics {
          background: linear-gradient(45deg, #eb2f96, #f759ab);
        }

        .button-icon {
          background: rgba(255, 255, 255, 0.2);
          padding: 15px;
          border-radius: 12px;
          font-size: 24px;
          transition: transform 0.3s ease;
        }

        .guide-button:hover .button-icon {
          transform: scale(1.1) rotate(10deg);
        }

        .button-content {
          flex: 1;
        }

        .button-title {
          display: block;
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 5px;
        }

        .button-desc {
          font-size: 14px;
          opacity: 0.9;
        }

        @media (max-width: 768px) {
          .guide-container {
            grid-template-columns: 1fr;
          }

          .news-section {
            grid-template-columns: 1fr;
          }

          .section-title {
            font-size: 24px;
            margin-bottom: 30px;
            width: 90%;
          }

          .guide-buttons {
            transform: scale(0.9);
            width: calc(100% - 32px); /* 减去两边的边距 */
            margin: 0 auto;
          }

          .news-block {
            transform: scale(0.92);
            width: calc(100% - 32px); /* 减去两边的边距 */
            margin: 0 auto 25px;
          }

          /* 确保内容不会超出边距 */
          .guide-button,
          .news-block {
            max-width: calc(100vw - 48px); /* 视口宽度减去总边距 */
            box-sizing: border-box;
          }
        }

        /* ====== 下拉菜单样式 ====== */
        .dropdown {
          position: relative;
          display: inline-block;
        }

        .dropdown-menu {
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          background: rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(8px);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 8px;
          padding: 8px 0;
          min-width: 100px;
          width: fit-content;
          max-width: 120px;
          display: none;
          z-index: 1000;
          margin-top: 8px;
        }

        .dropdown-menu::before {
          content: '';
          position: absolute;
          top: -20px;
          left: 0;
          right: 0;
          height: 20px;
          background: transparent;
        }

        .dropdown-menu a {
          color: #fff;
          padding: 8px 12px;
          margin: 0 4px;
          display: block;
          text-decoration: none;
          text-align: center;
          white-space: nowrap;
          border-radius: 4px;
          transition: background-color 0.3s ease;
        }

        .dropdown-menu a:hover {
          background: rgba(255, 255, 255, 0.2);
        }

        .dropdown:hover .dropdown-menu {
          display: block;
        }

        .dropdown-trigger {
          display: flex;
          align-items: center;
          gap: 4px;
          padding: 8px 12px;
          color: #fff;
          text-decoration: none;
          transition: color 0.3s ease;
        }

        .arrow-down {
          border: solid #fff;
          border-width: 0 2px 2px 0;
          display: inline-block;
          padding: 3px;
          transform: rotate(45deg);
          margin-top: -2px;
        }

        .close-button {
          position: absolute;
          top: 20px;
          right: 20px;
          width: 32px;
          height: 32px;
          background: none;
          border: none;
          cursor: pointer;
          z-index: 1002;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: transform 0.3s ease;
        }

        .close-button:hover {
          transform: rotate(90deg);
        }

        .close-button span {
          position: absolute;
          width: 24px;
          height: 2px;
          background-color: #fff;
          border-radius: 2px;
          transition: all 0.3s ease;
        }

        .close-button span:first-child {
          transform: rotate(45deg);
        }

        .close-button span:last-child {
          transform: rotate(-45deg);
        }

        .close-button:hover span {
          background-color: #1890ff;
          box-shadow: 0 0 8px rgba(24, 144, 255, 0.5);
        }

        .sidebar {
          .sidebar-top {
            padding-top: 60px;
          }
        }
        }

        @media (max-width: 768px) {
          /* 快速通道移动端样式 */
          .quick-links {
            padding: 40px 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          .section-title {
            text-align: center;
            margin-bottom: 20px;
            width: 90%;
            max-width: 320px; /* 与卡片宽度一致 */
          }

          .quick-links-grid {
            grid-template-columns: 1fr;
            width: 90%;
            max-width: 320px; /* 与标题宽度一致 */
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
          }

          .quick-link-card {
            width: 100%;
            margin: 0;
            transform: none; /* 移除缩放 */
          }

          /* ... 其他移动端样式保持不变 ... */
        }

        .process-step {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          margin-bottom: 20px;
        }

        .process-dot {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 2px dashed #dc3545;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          position: relative;
          z-index: 2;
        }

        .process-dot::before {
          content: '';
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #dc3545;
          position: absolute;
        }

        .process-line {
          width: 2px;
          height: 40px;
          background-color: #dc3545;
          margin: 10px auto;
        }

        .process-text {
          text-align: center;
          margin-top: 10px;
          width: 100%;
        }

        .process-step:nth-child(3) .process-dot {
          margin: 0 auto;
          transform: translateX(0);
        }

        /* 基础样式 */
        .animate-section {
          opacity: 0;
          transform: translateY(30px);
          transition: all 0.8s ease-out;
        }

        /* 入场动画样式 */
        .animate-section.animate-in {
          opacity: 1;
          transform: translateY(0);
        }

        /* 为不同板块添加延迟 */
        .quick-links {
          transition-delay: 0.2s;
        }

        .recruitment-guide {
          transition-delay: 0.4s;
        }

        /* 确保动画只在非移动端触发 */
        @media (max-width: 768px) {
          .animate-section {
            opacity: 1;
            transform: none;
            transition: none;
          }
        }

        .content-header {
          max-width: 1200px;
          margin: 0 auto;
          padding: 20px;
          display: flex;
          align-items: center;
          position: relative;
          background: #fff;
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
          border-radius: 8px;
          margin-top: -50px;
        }

        .leaf-decoration {
          position: relative;
          width: 60px;
          height: 120px;
          margin-right: 20px;
        }

        .leaf-top {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 60%;
          background: #c1272d;
          border-radius: 30px 30px 0 0;
        }

        .leaf-bottom {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 40%;
          background: #fff;
          border-radius: 0 0 30px 30px;
          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .header-content {
          flex: 1;
        }

        .artistic-title {
          font-family: "楷体", KaiTi, serif;
          font-size: 36px;
          color: #c1272d;
          margin: 0;
          line-height: 1.2;
        }

        .page-title {
          font-size: 24px;
          color: #333;
          margin: 5px 0 0 0;
        }

        .breadcrumb-nav {
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .breadcrumb-nav a {
          color: #666;
          text-decoration: none;
          transition: color 0.3s;
        }

        .breadcrumb-nav a:hover {
          color: #c1272d;
        }

        .separator {
          color: #999;
        }

        .current {
          color: #c1272d;
        }

        .content-divider {
          height: 1px;
          background: #e8e8e8;
          margin: 20px auto;
          width: 80%;
          max-width: 800px;
        }

        .announcements-list {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 20px;
        }

        .announcement-row {
          display: flex;
          align-items: center;
          padding: 15px 0;
          border-bottom: 1px dashed #e8e8e8;
        }

        .announcement-date {
          color: #999;
          margin-right: 20px;
          min-width: 100px;
        }

        .announcement-title {
          color: #333;
          text-decoration: none;
          flex: 1;
        }

        .announcement-title:hover {
          color: #c1272d;
        }

        .pagination-wrapper {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 20px;
          margin-top: 30px;
          padding-bottom: 30px;
        }

        .goto-page {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #666;
        }

        .goto-page input {
          width: 40px;
          height: 24px;
          border: 1px solid #d9d9d9;
          border-radius: 2px;
          text-align: center;
        }

        @media (max-width: 768px) {
          .page-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
          }

          .breadcrumb {
            margin-top: 10px;
          }

          .header-right {
            align-self: flex-end;
            margin-top: 10px;
          }

          .content-divider {
            width: 90%;
          }
        }

        /* 移除原来的面包屑样式 */
        .breadcrumb,
        .breadcrumb a,
        .breadcrumb span,
        .breadcrumb .current {
          all: unset;
        }

        .header-right {
          display: flex;
          align-items: center;
          padding: 10px 0;
        }

        @media (max-width: 768px) {
          .header-right {
            margin-top: 10px;
          }
        }

        @keyframes float {
          0%, 100% { transform: translateX(0); }
          50% { transform: translateX(3px); }
        }
      `}</style>
    </div>
  );
};

export default AnnouncementPage; 